<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView :topId="top.id"/>


  <div class="container-containerc">

    <el-breadcrumb>
      <el-breadcrumb-item :to="'/lists/' + item.id" v-for="(item, index) in cate_parent" :key="index">{{ item.title }}</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>{{ goodsInfo.name }} </el-breadcrumb-item> -->
    </el-breadcrumb>

      
    <div class="container-pdp-details1">
      

      <div class="container-pdp-details-left carousel-wap">
        
     
        <swiper :loop="true" :parallax="true">
          <swiper-slide v-for="(image, index) in goodsInfo.images" :key="index"><img :src="image" style="height: 400px; width: 100%; object-fit: cover;"  /></swiper-slide>
        </swiper>
    </div>


      <div class="container-pdp-details-left carousel-pc">
        
        <el-image
          v-for="(image, index) in goodsInfo.images"
          :key="index"
          :src="image"
          :zoom-rate="1.2"
          :min-scale="0.2"
          show-progress
          fit="cover"
          :preview-src-list="goodsInfo.images"
        />

     </div>

      <div class="container-pdp-details-right">
         <div class="welcome">Welcome deal</div>
        <div class="tilte">{{ goodsInfo.name }}</div>
        <el-rate
          v-model="value"
          disabled
          :colors="['#ff5a00', '#ff5a00', '#ff5a00']"
          text-color="#ff5a00"
        />
        <div class="tips">Sold {{ goodsInfo.stock }}</div>
        <div class="prices">
            <div>${{ parseFloat(goodsInfo.price * number).toFixed(2) }}</div>
            <span>${{ goodsInfo.market_price }}</span>
            <i>-{{ ((goodsInfo.market_price - goodsInfo.price) * 100/ goodsInfo.market_price).toFixed(2) }}% off</i>

        </div>
        <div class="secure"><svg t="1744973205026" class="secure-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9225" width="20" height="20"><path d="M509.8 959.6c-34.4 0-68.8-8.7-99.5-26.2L200.5 814.1C134.1 776.3 92.9 704.4 92.9 626.2V272.5c0-58.3 39.3-109.7 95.5-125.1l287.7-78.7c22.1-6 45.4-6 67.5 0l287.8 78.7c56.2 15.4 95.5 66.8 95.5 125.1v353.7c0 78.1-41.2 150.1-107.6 187.9l-210 119.3c-30.7 17.4-65.1 26.2-99.5 26.2z m0-798.6c-2.8 0-5.5 0.4-8.2 1.1l-287.7 78.7c-14.3 3.9-24.2 16.9-24.2 31.7v353.7c0 43.4 22.5 83.1 58.7 103.7l209.8 119.3c31.9 18.1 71.5 18.1 103.3 0l209.8-119.3c36.2-20.6 58.7-60.3 58.7-103.7V272.5c0-14.8-10-27.8-24.2-31.7L518 162.1c-2.6-0.7-5.4-1.1-8.2-1.1z" fill="#e62424" p-id="9226"></path><path d="M630.8 536.7H388.9c-26.7 0-48.4-21.7-48.4-48.4s21.7-48.4 48.4-48.4h241.9c26.7 0 48.4 21.7 48.4 48.4s-21.7 48.4-48.4 48.4z" fill="#e62424" p-id="9227"></path><path d="M509.8 657.6c-26.7 0-48.4-21.7-48.4-48.4V367.3c0-26.7 21.7-48.4 48.4-48.4s48.4 21.7 48.4 48.4v241.8c0 26.8-21.6 48.5-48.4 48.5z" fill="#e62424" p-id="9228"></path></svg>100% SECURE</div>
        <div class="tips">Price includes duties and taxes</div>
        <div class="tipslist">
          <p>100% Original Products</p>
          <p>Pay on delivery is not available</p>
          <p>Easy 3 days returns and exchanges</p>
        </div>

        <div class="qtr" ><el-input-number v-model="number"  value="1" placeholder="1"  :min="1" :max="99" @change="handleChange" /></div>

        <dl class="chicun" v-if="goodsInfo.attr_1_name">
            <dt>{{ goodsInfo.attr_1_name }}</dt>
            <dd>
              <label v-if="goodsInfo.attr_1_1">
               <input type="radio" v-model="attr_1_value" :value="goodsInfo.attr_1_1" />
               <span> {{ goodsInfo.attr_1_1 }}</span>
              </label>
              <label v-if="goodsInfo.attr_1_2">
               <input type="radio" v-model="attr_1_value" :value="goodsInfo.attr_1_2" />
               <span> {{ goodsInfo.attr_1_2 }}</span>
              </label>
              <label v-if="goodsInfo.attr_1_3">
               <input type="radio" v-model="attr_1_value" :value="goodsInfo.attr_1_3" />
               <span> {{ goodsInfo.attr_1_3 }}</span>
              </label>

            </dd>
         </dl>

          <dl class="chicun" v-if="goodsInfo.attr_2_name">
            <dt>{{ goodsInfo.attr_2_name }}</dt>
            <dd>
              <label v-if="goodsInfo.attr_2_1">
                <input type="radio" v-model="attr_2_value" :value="goodsInfo.attr_2_1" />
                <span> {{ goodsInfo.attr_2_1 }}</span>
              </label>
              <label v-if="goodsInfo.attr_2_2">
                <input type="radio" v-model="attr_2_value" :value="goodsInfo.attr_2_2" />
                <span> {{ goodsInfo.attr_2_2 }}</span>
              </label>
              <label v-if="goodsInfo.attr_2_3">
                <input type="radio" v-model="attr_2_value" :value="goodsInfo.attr_2_3" />
                <span> {{ goodsInfo.attr_2_3 }}</span>
              </label>
            </dd>
         </dl>


        <div class="router-button">
          <p>1529 people looked at this item in the last day.</p>
          <span @click="toBug()">CHECKOUT</span>
        </div>

        <div class="product-details">
          <div class="nanme">
            PRODUCT DETAILS<svg t="1744963850090" class="nanme-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9102"><path d="M320.4 960.7c-15.9 0-31.8-4.6-45.4-13.9l-50.8-34.4-33 27.8c-17.1 14.4-41.4 17.6-61.7 8.2C109.1 939 96 918.4 96 896V197.9c0-75.2 61.1-136.3 136.3-136.3h559.4c75.2 0 136.3 61.1 136.3 136.3v700.9c0 21.7-12 41.4-31.2 51.4-19.3 10-42.2 8.4-60-4.1l-47.6-33.6-36.4 29.1c-28.5 22.8-69 23.7-98.5 2.1L610 911.2l-52 35.5c-27.8 18.9-64.8 18.7-92.3-0.7l-49.5-34.8-48.9 34.7c-14 9.9-30.4 14.8-46.9 14.8z m568.3-88.1h0.2-0.2z m-472.6-53.3c16.3 0 32.7 4.9 46.6 14.7l49.6 34.9 52.2-35.6c28.3-19.3 65.9-18.7 93.5 1.6l43.8 32.1 36.3-29c28-22.4 68.1-23.6 97.4-2.9l2.4 1.7V197.9c0-25.6-20.8-46.4-46.4-46.4H232.3c-25.6 0-46.4 20.8-46.4 46.4v631.6c26-13.5 58.1-12.2 83 4.7l51.3 34.7 49-34.7c14.1-9.9 30.5-14.9 46.9-14.9z" fill="#333333" p-id="9103"></path><path d="M680.6 425.3H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h334.5c24.8 0 45 20.1 45 45s-20.1 45-45 45zM503.5 637.6H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h157.4c24.8 0 45 20.1 45 45s-20.2 45-45 45z" fill="#333333" p-id="9104"></path></svg>
          </div>
          <div class="textarea" v-html="goodsInfo.content">    </div>

          <div class="nanme">
            RETURNS & EXCHANGES<svg t="1744963850090" class="nanme-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9102"><path d="M320.4 960.7c-15.9 0-31.8-4.6-45.4-13.9l-50.8-34.4-33 27.8c-17.1 14.4-41.4 17.6-61.7 8.2C109.1 939 96 918.4 96 896V197.9c0-75.2 61.1-136.3 136.3-136.3h559.4c75.2 0 136.3 61.1 136.3 136.3v700.9c0 21.7-12 41.4-31.2 51.4-19.3 10-42.2 8.4-60-4.1l-47.6-33.6-36.4 29.1c-28.5 22.8-69 23.7-98.5 2.1L610 911.2l-52 35.5c-27.8 18.9-64.8 18.7-92.3-0.7l-49.5-34.8-48.9 34.7c-14 9.9-30.4 14.8-46.9 14.8z m568.3-88.1h0.2-0.2z m-472.6-53.3c16.3 0 32.7 4.9 46.6 14.7l49.6 34.9 52.2-35.6c28.3-19.3 65.9-18.7 93.5 1.6l43.8 32.1 36.3-29c28-22.4 68.1-23.6 97.4-2.9l2.4 1.7V197.9c0-25.6-20.8-46.4-46.4-46.4H232.3c-25.6 0-46.4 20.8-46.4 46.4v631.6c26-13.5 58.1-12.2 83 4.7l51.3 34.7 49-34.7c14.1-9.9 30.5-14.9 46.9-14.9z" fill="#333333" p-id="9103"></path><path d="M680.6 425.3H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h334.5c24.8 0 45 20.1 45 45s-20.1 45-45 45zM503.5 637.6H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h157.4c24.8 0 45 20.1 45 45s-20.2 45-45 45z" fill="#333333" p-id="9104"></path></svg>
          </div>
          <div class="textarea">
            Little Rascal gladly accepts returns of unworn, unwashed, undamaged or defective online purchases for a 30-day refund or exchange.Please send the relevant information to the e-mail address to check the return and exchange information, e-mail address: toantoan.nt1978@gmail.com.
          </div>

      </div>
    </div>

    </div>


    <div class="h1">RECOMMENDED PRODUCTS</div>
    <div class="proalistb">


      

       <div class="list"  v-for="item in goodsList" :key="item.id" >
      <router-link :to="'/Details/'+item.id">
          <el-image :src="item.pic" fit="fill" />
          <div class="prices">$<span>{{ item.price }}</span><i>$299.99</i></div>
          <div class="title">{{ item.name }}</div>

      </router-link>
      </div>

    </div>



  </div>

  <FooterView class="footer" />

</template>
 
<script lang="ts">

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper.min.css'
import createAxios from '../utils/axios'
import { useUserInfo } from '../stores/userInfo'
import { onBeforeRouteLeave   } from 'vue-router'
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'

//const num = ref(1)



const handleChange = (value: number | undefined) => {
  console.log(value)
}

const userInfo = useUserInfo()

import { ref } from 'vue';
const value = ref(5)
const imageList = ref([
  { url: '/temp/details-1.jpg' },
  { url: '/temp/details-2.jpg' },
  { url: '/temp/details-3.jpg' },
  { url: '/temp/details-4.jpg' },
]);
const srcList = [
  '/temp/details-1.jpg',
  '/temp/details-2.jpg',
  '/temp/details-3.jpg',
  '/temp/details-4.jpg',
]
export default {
  data() {
    return {
      pageTitle: 'Little Rascal',
      goodsInfo: {},
      goodsList: [],
      top_child: [],
      cate_parent: [],
      top: [],
      cate:{},
      cate_id:0,
      number:1,
      attr_1_value:'',
      attr_2_value:'',
    };
  },
  created() {
    // console.log('ddd')
    this.updateTitle();
    this.fetchGoodList();
    this.fetchGoodInfos(this.$route.params.id);
  },
  watch:{
      // 监听路由变化，处理参数更新
      '$route.params.id'(newId, oldId) {
        this.number = 1
        this.attr_1_value = ''
        this.attr_2_value = ''
        console.log(newId, oldId)
        this.fetchGoodInfos(newId)
      }
  },
  mounted() {
    // 如果 store 中没有数据，则请求接口
    // if (Object.keys(this.formData).length === 0) {
    //   this.$store.dispatch('fetchFormData');
    // }

    // setTimeout(function(){
    //   if(!userInfo.getUser()){
    //     window.location.href = '/Signin'
    //   }
    // },1000)

  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    },
    // 获取商品信息
    fetchGoodInfos(id){
      this.cate_id = id

      createAxios({
        url: '/frontend/goods/show',
        method: 'post',
        data: {id: id},
        })
        .then((res) => {
            console.log('商品详情请求结果', res)
            this.goodsInfo = res.data
            this.top_child = res.data.top_child
            this.top = res.data.top
            this.cate_parent = res.data.cate_parent
            this.cate = res.data.cate
        })
        .catch(() => {
        })
    },
    // 获取推荐商品
    fetchGoodList(){
      createAxios({
        url: '/frontend/goods/propose',
        method: 'post',
        data: {},
        })
        .then((res) => {
            this.goodsList = res.data.list
        })
        .catch(() => {
        })
    },
    // 去购买
    toBug(){
      let url = '/Buying/'+this.goodsInfo.id+'?number='+this.number;

      if(this.goodsInfo.attr_1_name){
        if(!this.attr_1_value){
          ElNotification({
              type: 'error',
              message:'Please select complete',
              zIndex: 9999,
          })
          return
        }
        url = url+'&attr_1_value='+this.attr_1_value
      }
      if(this.goodsInfo.attr_2_name){
        if(!this.attr_2_value){
          ElNotification({
              type: 'error',
              message:'Please select complete',
              zIndex: 9999,
          })
          return
        }
         url = url+'&attr_2_value='+this.attr_2_value
      }

      window.location.href = url
    }
  }

}
</script>

<style >


	.container-containerc {
    min-width: 1000px;
		padding: 0 5%;
    margin: 0 auto 0 auto;
    max-width: 1520px;
    
	}


 .proalistb {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 20px;
  .list
   {
    display: inline-block;
    width: 18%;
    padding: 10px 0;
    margin: 1%;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 250px !important;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 700;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}


 input[type="radio"] {
  display: none;


}

 input[type="radio"]:checked + span {
      background-color: #fd384f;
        border: 1px solid #fd384f;
        color: #ffffff;
      }

.chicun {
  padding: 20px 0 0 0;
  dt {
    font-size: 18px;
    font-weight: 700;
  }
  dd {
    padding: 10px 0;
    span {
      border-radius: 4px;
      padding:10px 12px;
      border: 1px solid #c8cbd1;
      margin-right: 10px;
      cursor: pointer;
      font-size: 13px;
    }


  }
}
.container-containerc {
  margin-top: 170px;
  .h1 {
    font-weight: 500;
    font-size: 18px;
    padding: 50px 0 20px 0;
    padding-top: 10px !important;
    border-top: 2px solid #333;
    margin-top: 30px;
  }
  .container-pdp-details1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0 0 0;
    .container-pdp-details-left {
      display: flex;
      justify-content: space-between;
      align-items:flex-start;
      flex-wrap: wrap;
      width: calc( 100% - 660px );
      .el-image {
        width: calc( 50% - 5px );
        margin: 0 5px 10px 0;
      }
      .el-image:nth-child(2n) {
        margin-right: 0;
      }
      .el-image__error, .el-image__inner, .el-image__placeholder, .el-image__wrapper {
        height: auto;
      }

    }
    .carousel-wap {
        display: none ;
      }
    .container-pdp-details-right {
      width: 620px;
      .welcome {
        background-color: #e62424;
        border-radius: 4px;
        padding: 6px 10px;
        color: #ffffff;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .tilte {
        line-height: 1.4;
        font-size: 24px;
        font-weight: 700;
      }
      .prices {
        padding: 10px 0 0 0;
        line-height: 1;
        font-weight: 500;
        display: flex;
        align-items: center;
        div {
          font-size: 30px;
          font-weight: 600;
        }
        span {
          font-size: 16px;
          margin-left: 10px;
          text-decoration: line-through;
          color: #bbbbbb;
          padding-top: 4px;
        }
        i {
          padding-top: 4px;
          font-style: normal;
           font-size: 16px;
          color: #e62424;
          margin-left: 10px;
        }
      }
      .secure {
        padding: 20px 0 10px 0;
        line-height: 20px;
        display: flex;
        color: #e62424;
        font-weight: 700;
        .secure-icon {
          margin:0 6px 0 0;
        }
      }
      .tips {
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        color: #666;
      }
      .tipslist {
        margin: 20px 0 ;
        border-top: 1px solid #f1f1f1;
        padding: 10px 0 0 0;
        font-weight: 400;
        line-height: 26px;
      }
      .router-button {
        padding: 10px 0 0 0;
        p {
          font-size: 13px;
          color: #666;
          padding-bottom: 10px;

        }
        span {
          background-color: #000;
          display: block;
          color: #fff;
          text-align: center;
          padding: 12px;
          font-weight: 700;
          font-size: 16px;
          cursor: pointer;
        }
        a:hover {
          background-color: #333;
        }
      }
      .product-details {
        padding: 30px 0 0 0;
        .nanme {
          font-size: 18px;
          font-weight: 600;
          line-height: 1;
          .nanme-icon {
            width: 14px;
            margin-left: 10px;
          }
        }
        .textarea {
          padding: 20px 0;
          line-height: 32px;
          border-bottom: 1px solid #f1f1f1;
          margin-bottom: 20px;
        }
        .textarea:last-of-type {
          border-bottom:0;
          margin-bottom: 0;
          padding-bottom: 0;

         }
      }
      .el-rate .el-rate__icon {
        margin: 0;
      }
    }
  }

}

.container-container-list {
    padding-bottom: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    a {
      display: inline-block;
      padding:10px 0  30px 0;
      width: 18%;
      img {
        width: 100%;
      }
      h3 {
        line-height: 40px;
        padding: 0px 5% 0 5%;
        font-size: 26px;
        background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
      p {
        font-size: 16px;
        line-height: 24px;
        height: 48px;
        padding:0 5% 0 5%;
         overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
      }
    }
    a:hover {
      -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      background-color: #fff;
    }
  }
  .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

@media only screen and (max-width: 1000px) {
  .container-containerc {
            max-width: 90%;
        min-width: 90%;
        width: 90%;
        padding: 0;
        margin-top: 80px !important;

  }
  .chicun {
   dd {
    display: flex;
    flex-wrap: wrap;
    label {
      display:inline-block;
      margin-bottom: 20px;

    }
   }

}
.product-details {
  padding: 10px 0 0 0 !important;
}

  .carousel-wap {
    display: block !important;
    .el-carousel__container {
      height: 400px;
    }
  }
  .carousel-pc {
    display: none !important;
  }
  body {
    overflow: auto !important;
  }
  .footer {
    display: none;
  }
  .el-image-viewer__wrapper {
    display: none;
  }
  .container-pdp-details1 {
    flex-wrap: wrap;
  }
  .container-pdp-details-left {
    width: 100% !important;
  }
  .container-pdp-details-right {
    width: 100% !important;
    .welcome {
      margin: 10px 0 0 0 !important;
        font-weight: 700;
      }
    .tilte {
      padding-top: 10px;
    }
  }
  .container-containerc {
    
      margin-top:100px !important;
     
       .proalistb {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 100px;

  .list
   {
    display: inline-block;
    width: 47%;
    padding: 10px 0 2px 0;
    margin-right: 3%;
    margin-left: 0;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 160px !important;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 500;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .list:nth-child(2n)
  {
    margin-right: 0;
  }
}


  }
  .container-container-list{
    padding-bottom: 90px;
    width: 100%;
    a {
      width: calc( 50% - 10px );
      margin-right: 0;
    }
    a:nth-child(2n) {
      margin-right: 0;
    }
    a:hover {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)  !important;
      box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
    }
  }
  .el-image img {
    height: 100% !important;
  }
  .container-containe {
    height: auto;
  }
  .tipslist {
    padding-bottom:0 !important;
  }
  .router-button {
    position: fixed;
    bottom: 0;
    z-index: 10000;
    left: 0;
    background-color: #ffffff;
    width: 100%;
    padding: 14px !important;
    -webkit-box-shadow: 0px 9px 4px 10px rgba(0, 0, 0, .05);
    box-shadow: 0px 9px 4px 10px rgba(0, 0, 0, .05);
    p {
      display: none !important;
    }
  }
  .h1 {
    padding-top: 10px !important;
    border-top: 2px solid #333;
    margin-top: 20px;
  }

}
</style>
